<div class="wrap">
    <div class="container">
        <div class="row">
            <div id="secondary" class="col-md-2">
                <nav class="list-group mt30">
                    <a href="{:U('index/settings/index')}" class="list-group-item">
                        个人资料
                    </a>
                    <a target="_blank" href="{:U('index/settings/face')}" class="list-group-item">
                        头像修改
                        <i style="line-height: 20px;font-size: 12px;color: #999;" class="pull-right fa fa-external-link-square">
                        </i>
                    </a>
                    <a href="{:U('index/settings/email')}" class="list-group-item active">
                        Email 地址
                    </a>
                    <a href="{:U('index/settings/password')}" class="list-group-item">
                        密码修改
                    </a>
                    <a href="/user/settings?tab=oauth" class="list-group-item">
                        第三方账号
                    </a>
                </nav>
                <nav class="list-group mt30">
                    <a href="/user/settings?tab=notify" class="list-group-item">
                        通知和私信
                    </a>
                    <a href="/user/settings?tab=card" class="list-group-item">
                        个性名片
                    </a>
                    <a href="/user/settings?tab=block" class="list-group-item">
                        屏蔽名单
                    </a>
                    <a href="/user/settings?tab=lab" class="list-group-item">
                        实验室功能
                    </a>
                </nav>
            </div>
            <!-- end #secondary -->
            <div id="main" class="settings col-md-10 form-horizontal">
                <form id="setting" action="/api/settings/mail/edit" method="post">
                    <h2 class="h3 mt30 post-title">
                        Email 地址
                    </h2>
                    <div class="form-group mt20">
                        <label class="control-label col-sm-2">
                            当前 Email 地址
                        </label>
                        <div class="col-sm-8">
                            <p class="form-control-static">
                                <?php echo $_SESSION['email']; ?>
                            </p>
                        </div>
                    </div>
                    <div class="form-group mt15">
                        <label for="setting-mail" class="required control-label col-sm-2">
                            新 Email 地址
                        </label>
                        <div class="col-sm-8">
                            <input name="mail" id="setting-mail" type="email" placeholder="hello@segmentfault.com"
                            class="form-control mono" autocomplate="false" required="">
                            <span class="reform"></span>
                            <p class="text-muted mt5">
                                提交后新邮箱将收到激活邮件，激活邮件里的链接才能修改成功
                            </p>
                        </div>
                    </div>
                    <div class="form-action row">
                        <div class="col-sm-10 col-sm-offset-2">
                            <button class="btn btn-xl btn-primary mail-sub">
                                提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript"> 
    $('#setting-mail').blur(function(event) {
        var value = $(this).val();
        if (value=='') {
            $('.reform').html('<span style="color:red">邮箱不能为空</span>');
            return false;
        }
    

        $.ajax({
            url: '{:U('Index/settings/checkemail')}',
            type: 'post',
            dataType: 'json',
            data: {emailvalue:value},   
            success:function(data){
                if( data.error == 1 ){
                    $('.reform').html('<span style="color:red">'+data.msg+'</span>');
                    $('.btn-xl').attr('disabled','');
                }else{
                    $('.reform').html('<span style="color:green">'+data.msg+'</span>');
                    $('.btn-xl').removeAttr('disabled','');
                }
            },
            error:function(){
            }
        })
    })
</script>